<template>
  <i18n-t tag="span" :keypath="getTitle" scope="global" />
</template>

<script setup lang="ts">
  import { type PropType, computed } from 'vue'
  import { useLocaleStore } from '@/store/modules/locale'

  const props = defineProps({
    title: {
      type: [String, Object] as PropType<string | Title18n>,
      required: true,
      default: '',
    },
  })

  const localeStore = useLocaleStore()

  const getTitle = computed(() => {
    const { title = '' } = props
    if (typeof title === 'object') {
      return title?.[localeStore.locale] ?? title
    }
    return title
  })
</script>
